import React from 'react'
import classNames from 'classnames'

import { View } from '@tarojs/components'
import './index.scss'

interface IParams {
  width?: number
  height?: number
  size?: number
  isCenter?: boolean
  [key: string]: any
}

/**
 * 骨架图
 * @param width 骨架图 宽度 默认值 0
 * @param height 骨架图 高度 默认值 0
 * @param size 骨架图 宽高 相同 默认值 0
 */
export default function CSkeleton(params: IParams) {
  const { size = 0, width = 0, height = 0, isCenter = true } = params
  return (
    <View
      className={classNames([
        'c_skeleton',
        width && `c_skeleton-width-${width}`,
        height && `c_skeleton-height-${height}`,
        size && `c_skeleton-size-${size}`,
        !isCenter && `no-margin`,
      ])}
    >
      {params.children}
    </View>
  )
}
